<template>
  <view class="confirm-order-page">
    <!-- 顶部步骤条 -->
    <view class="steps">
      <view class="step-item" :class="{ active: currentStep === 0 }">
        <text class="step-text">预约服务</text>
      </view>
      <view class="step-line"></view>
      <view class="step-item" :class="{ active: currentStep === 1 }">
        <text class="step-text">支付订单</text>
      </view>
      <view class="step-line"></view>
      <view class="step-item" :class="{ active: currentStep === 2 }">
        <text class="step-text">门店服务</text>
      </view>
    </view>

    <!-- 门店信息 -->
    <view class="shop-info">
      <view class="shop-name">
        <image class="shop-icon" src="/static/车店.png"></image>
        <text>伟业汽车美容店路店</text>
      </view>
      <text class="shop-address">山阳区人民中路32号</text>
      <view class="shop-phone">18895039309</view>
    </view>

    <!-- 车辆信息（可扩展为选择车辆等交互） -->
    <view class="car-info" @click="showCarSelect">
      <image class="car-icon" src="/static/汽车.png"></image>
      <text class="car-text">点击选择车辆</text>
      <image class="arrow-icon" src="/static/right.png"></image>
    </view>

    <!-- 服务产品 -->
    <view class="service-product">
      <view class="product-title">
        <text>服务产品</text>
        <text class="product-count">共选择1项服务产品</text>
      </view>
      <view class="product-item">
        <text class="product-name">精洗汽车</text>
        <text class="product-price">¥ 199</text>
      </view>
      <view class="coupon" @click="showCouponDetail">
		  <image class="car-icon" src="/static/优惠券.png"></image>
        <text class="coupon-text">优惠券</text>
        <text class="coupon-value">-10元</text>
        <image class="arrow-icon" src="/static/right.png"></image>
      </view>
    </view>

    <!-- 底部合计与提交 -->
    <view class="bottom-bar">
      <view class="total-price">
        <text>合计：</text>
        <text class="price">¥30.50</text>
      </view>
      <button class="submit-btn" @click="submitOrder">提交订单</button>
    </view>

    <!-- 联系客服（可根据需求调整位置和交互） -->
    <view class="contact-service">
      <image class="service-icon" src="/static/service-icon.png"></image>
      <text>联系客服</text>
    </view>
	<!-- 支付密码弹窗 -->
	<view class="pay-popup" v-if="showPayPopup">
	  <view class="pay-popup-mask" @click="closePayPopup"></view>
	  <view class="pay-popup-content">
	    <view class="popup-header">
	      <text class="popup-title">请输入支付密码</text>
	      <text class="popup-close" @click="closePayPopup">×</text>
	    </view>
	    <view class="popup-amount">¥ {{ payAmount }}</view>
	    <view class="popup-pay-type">
	      <text>支付方式</text>
	      <text class="pay-type-text" @click="choosePayType">零钱></text>
	    </view>
	    <view class="popup-input">
	      <input 
	        class="pay-input" 
	        type="number" 
	        maxLength="6" 
	        placeholder="请输入6位支付密码" 
	        v-model="payPassword"
	        @input="handleInput"
	      />
	    </view>
		<!-- 确认支付按钮 -->
		    <button class="confirm-pay-btn" @click="confirmPay">确认支付</button>
	  </view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0, // 当前步骤，可根据实际流程调整
	  showPayPopup: false, // 控制支付弹窗显示
	      payAmount: 597.00,   // 支付金额（示例）
	      payPassword: "",     // 支付密码
	      payType: "零钱",     // 支付方式
    };
  },
  methods: {
    showCarSelect() {
      // 模拟点击选择车辆逻辑，可跳转到选择车辆页面等
      uni.showToast({
        title: '选择车辆逻辑待实现',
        icon: 'none'
      });
    },
    showCouponDetail() {
      // 模拟查看优惠券详情逻辑
      uni.showToast({
        title: '优惠券详情逻辑待实现',
        icon: 'none'
      });
    },
    submitOrder() {
        // 点击提交订单后，显示支付弹窗
        this.showPayPopup = true;
      },
      closePayPopup() {
        // 关闭支付弹窗
        this.showPayPopup = false;
        this.payPassword = ""; // 清空密码
      },
      choosePayType() {
        // 模拟选择支付方式（可扩展为弹窗选择）
        uni.showActionSheet({
          itemList: ["零钱", "银行卡", "微信支付"],
          success: (res) => {
            this.payType = res.tapIndex === 0 ? "零钱" : res.tapIndex === 1 ? "银行卡" : "微信支付";
          }
        });
      },
      handleInput(e) {
        // 限制密码为6位数字（可选逻辑）
        this.payPassword = e.detail.value.replace(/\D/g, "").slice(0, 6);
      },
	  confirmPay() {
	      // 模拟密码校验（实际需调用后端接口）
	      if (this.payPassword === "123456") {
	        // 密码正确：跳转到支付完成页面
	        uni.navigateTo({
	          url: "/pages/order-pay/order-pay", // 替换为实际支付完成页路径
	        });
	        this.closePayPopup(); // 关闭弹窗
	      } else {
	        // 密码错误：提示用户
	        uni.showToast({
	          title: "支付密码错误，请重新输入",
	          icon: "none",
	          duration: 2000,
	        });
	        this.payPassword = ""; // 清空密码
	      }
	    },
  }
};
</script>

<style scoped>
.confirm-order-page {
  padding: 15rpx;
  background-color: #fff;
}

/* 步骤条样式 */
.steps {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx 0;
}
.step-item {
  width: 120rpx; 
    height: 120rpx;
    border: 2rpx solid #ccc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20rpx;
}
.step-text {
  font-size: 24rpx;
    text-align: center; 
    line-height: 30rpx;
}
.active {
  border-color: #000; 
}
.active .step-text {
  color: #000;
}
.step-line {
  flex: 1;
    height: 2rpx;
    background-color: #ccc;
    margin: 0 10rpx;
}

/* 门店信息样式 */
.shop-info {
  margin-top: 30rpx;
}
.shop-name {
  display: flex;
  align-items: center;
}
.shop-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}
.shop-address {
	margin-left: 50rpx;
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
.shop-phone {
margin-right: 30rpx;
  text-align: right;
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

/* 车辆信息样式 */
.car-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
}
.car-icon {
  width: 40rpx;
  height: 40rpx;
}
.car-text {
  flex: 1;
  margin-left: 10rpx;
  font-size: 26rpx;
}
.arrow-icon {
  width: 30rpx;
  height: 30rpx;
}

/* 服务产品样式 */
.service-product {
  margin-top: 30rpx;
}
.product-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  font-weight: bold;
}
.product-count {
  font-weight: normal;
  color: #999;
}
.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  font-size: 26rpx;
}
.product-price {
  color: #ff0000;
}
.coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  font-size: 26rpx;
}

/* 底部栏样式 */
.bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.total-price {
  font-size: 26rpx;
}
.price {
  color: #ff0000;
  font-weight: bold;
}
.submit-btn {
	margin-right:10rpx ;
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background-color: #ff0000;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
}

/* 联系客服样式 */
.contact-service {
  position: fixed;
  bottom: 120rpx;
  left: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}
.service-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 5rpx;
}
/* 支付弹窗样式 */
.pay-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.pay-popup-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.pay-popup-content {
  width: 80%;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  position: relative;
}
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}
.popup-title {
  font-size: 32rpx;
  font-weight: bold;
}
.popup-close {
  font-size: 40rpx;
  color: #999;
}
.popup-amount {
  font-size: 48rpx;
  text-align: center;
  margin-bottom: 30rpx;
  color: #ff0000;
}
.popup-pay-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 30rpx;
}
.pay-type-text {
  color: #007aff;
}
.popup-input {
  display: flex;
  justify-content: center;
}
.pay-input {
  width: 60%;
  height: 80rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 32rpx;
}
.confirm-pay-btn {
  width: 60%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #ff0000;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  margin: 30rpx auto 0;
  display: block;
}
</style>